 <template>
  <div class="loginModule">
    <p class="loginM-title">If you are not still our member,please register immediately</p>
    <p class="loginM-text dn">欢迎注册成为会员查看内容</p>
    <van-cell-group :border="false">
      <van-field class="loginM-input-box" v-model="params.uemail" clearable placeholder="Email" />
      <van-field class="loginM-input-box" v-model="params.upasswd" :type="passwordtype" :right-icon="showpsd" @click-right-icon="clickEye" placeholder="Password" />
    </van-cell-group>
    <a class="loginM-foget" :href="'tel:'+phoneNum" >Forgot Password?</a>
    <div class="loginItem" :class="{active:btnstatu}" @click="login">LOGIN</div>
    <p class="loginM-register">
      Dont’t have an account yet?
      <router-link class="a" to="/register">Register Now</router-link>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
import { getnewsDetail } from "../../api/sort";
import { login } from "../../api/user";
import utils from "../../assets/js/util";
import loginMinin from "../../mixin/login";
export default {
    data() {
        return {
             phoneNum: this.$store.state.nocaches.kefuphone,
            showpsd: "closed-eye",
            passwordtype: "password",
            isLogin: false, //是否登录
            isClick: false, //防止多次点击
            btnstatus: false, //不可点击
            
        };
    },
    mixins:[loginMinin],
    computed: {
        btnstatu() {
            if (this.params.uemail != "" && this.params.upasswd != "") {
                this.btnstatus = true;
                return true;
            } else {
                this.btnstatus = false;
                return false;
            }
        }
    },
    inject: ["reload"],
    methods: {
        login() {
            if (!this.btnstatus) {
                this.$toast("Email/password shouldn't be empty");
                return;
            }
            if (!this.params.uemail) {
                this.$toast("Email shouldn't be empty");
                return false;
            }
            if (!this.params.upasswd) {
                this.$toast("The password  shouldn't be empty");
                return false;
            }
            if (this.isClick) {
                return;
            }
            this.isClick = true;
            login(this.params).then(res => {
                this.isClick = false;
                if (res.code == "0000") {
                     this.$store.commit("muLoginQuery", this.params);
                    this.$store.dispatch("acLoginInfor", res.data);
                    this.reload();
                } else {
                    this.$toast(res.msg);
                }
            });
        },
        clickEye() {
            // 条件判断  ？ A(是) ： B(否)   并返回值
            //  this.showpsd = this.showpsd== "eye-o" ? 'closed-eye' :"eye-o";
            //    this.passwordtype = this.showpsd== "eye-o" ? 'closed-eye' :"eye-o";
            if (this.showpsd == "eye-o") {
                this.showpsd = "closed-eye";
                this.passwordtype = "password";
            } else {
                this.showpsd = "eye-o";
                this.passwordtype = "text";
            }
        }
    }
};
</script>
<style scoped lang="less">
.loginModule {
    padding: 0.2rem;
}
.loginM-input-box {
    //  height: 1.14rem;
    line-height: 1.5;
    border-bottom: 0.01rem solid rgba(222, 223, 223, 1);
    padding: 15px;
}
.loginM-title {
    font-size: 0.36rem;
    font-weight: bolder;
    color: #1F86E4;
    margin-bottom: 0.3rem;
}
.loginM-text {
    font-size: 0.26rem;
    margin-bottom: 0.16rem;
    color: rgba(110, 111, 117, 1);
}
.loginM-foget {
     display: block;
    font-size: 0.28rem;
    color: rgba(39, 41, 55, 1);
    text-align: right;
    margin: 0.4rem 0 0.6rem;
}
.loginItem {
    width: 6.3rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    margin: 0 auto;
    background: rgba(242, 243, 245, 1);
    border-radius: 0.08rem;
    color: rgba(131, 134, 133, 1);
    &.active {
        background: #1F86E4;
        color: #ffffff;
    }
}
.loginM-register {
    height: 1.1rem;
    line-height: 1.1rem;
    text-align: center;
    color: rgba(131, 134, 133, 1);
    .a {
        color: #1F86E4;
    }
}
</style>
